import DatePicker from "components/antd-compatible/date-picker";
import { messages, queryCurrencyPrecision } from "share/common";
import React, { Component, PropTypes } from 'react'
import moment from "moment";
import {  Icon, Popover, Spin, Popconfirm, message, Tag } from "antd";
import expenseReportService from "../../../expense-report/expense-report.service";
import Condition from "components/condition";
const { If } = Condition;
import constants from "share/constants";
import SlideExpenseReportDetailRelative from './slide-expense-report-detail-relative'

class SlideExpenseReportDetailHeader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bookDate: null,
      saving: false
    }
  }

  static contextTypes = {
    info: PropTypes.object,
    isWaitForAudit: PropTypes.bool
  };

  render() {
    const { isWaitForAudit, info } = this.context;
    let currencyPrecision = queryCurrencyPrecision(info.currencyCode);
    return (
      <div className='slide-expense-report-detail-header'>
        <SlideExpenseReportDetailRelative/>
        <div className='slide-document-info-row default-color-font'>
          <If value={info.expenseReportBagCode}>
            {messages('expense-14.key270')/*关联发票袋*/}：{info.expenseReportBagCode} >
          </If>
        </div>
        <div className='slide-document-info-row default-color-font'>
          <If value={info.deliveryCode}>
            {messages('expense-14.key293')/*快递单号*/}：{info.deliveryCode} >
          </If>
        </div>
        <div className='slide-expense-report-detail-header-form'>
          {info.formName}
          {constants.documentStatus.map(item => {
            if(
              (item.value === String(info.status) && info.rejectType === 1000) ||
              item.value === String(info.status * 10000 + info.rejectType)
            ) {
              return <Tag
                color={item.color}
                className='slide-expense-report-detail-header-form-status'
              >
                {item.text}
              </Tag>
            }
          })}
        </div>
        <If value={info.nodeName}>
          <div className="slide-expense-report-detail-header-nodeName">
            <Popover content={info.nodeName} placement="topLeft">{info.nodeName}</Popover>
          </div>
        </If>
        <div className='slide-expense-report-detail-header-amount'>
          {info.currencyCode}&nbsp;
          {this.filterMoney(info.totalAmount, currencyPrecision)}
        </div>
        <div className='slide-expense-report-detail-header-pay'>
          {messages('expense-14.key294')/*付款金额*/}：
          {info.currencyCode}&nbsp;
          {this.filterMoney(info.realPaymentAmount, currencyPrecision)}
        </div>
        <div className='slide-expense-report-detail-header-pay'>
          {messages('expense-14.key295')/*核销金额*/}：
          {info.currencyCode}&nbsp;
          {this.filterMoney(info.writeoffAmount, currencyPrecision)}
        </div>
      </div>
    )
  }

}

export default SlideExpenseReportDetailHeader;
